<template>
  <div class="profile-container">
    <div class="header">
      <div class="back-button" @click="$router.go(-1)">
        ←
      </div>
      <h1>个人中心</h1>
      <div class="logout" @click="logout">
        退出
      </div>
    </div>

    <div class="user-info" v-if="user">
      <div class="avatar">
        👤
      </div>
      <div class="info">
        <h2>{{ user.username }}</h2>
        <div class="stats">
          <div class="stat-item">
            <div class="count">{{ user.work_count || 0 }}</div>
            <div class="label">作品</div>
          </div>
          <div class="stat-item">
            <div class="count">{{ user.favorite_count || 0 }}</div>
            <div class="label">点赞</div>
          </div>
          <div class="stat-item">
            <div class="count">{{ user.follow_count || 0 }}</div>
            <div class="label">关注</div>
          </div>
          <div class="stat-item">
            <div class="count">{{ user.follower_count || 0 }}</div>
            <div class="label">粉丝</div>
          </div>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="tab-header">
        <div class="tab-item active">我的视频 ({{ totalVideos }})</div>
      </div>

      <div class="video-list" v-loading="loading">
        <div v-if="videos.length === 0 && !loading" class="empty-tip">
          <p>🎬</p>
          <p>暂无视频，去发布第一个作品吧~</p>
          <button @click="goToPublish" class="publish-btn">立即发布</button>
        </div>

        <div v-else class="video-grid">
          <div v-for="video in displayedVideos" :key="video.id" class="video-item" @click="playVideo(video)"
            @contextmenu.prevent="showVideoMenu(video, $event)" @touchstart="onTouchStart(video, $event)"
            @touchend="onTouchEnd">
            <div class="video-cover">
              <img :src="video.cover_url || defaultCoverImage" :alt="video.title" @error="handleImageError">
              <div class="video-title">{{ video.title }}</div>
              <div class="video-stats">
                <span class="stat-item">
                  ❤️ {{ video.favorite_count || 0 }}
                </span>
                <span class="stat-item">
                  💬 {{ video.comment_count || 0 }}
                </span>
              </div>
              <div class="video-duration">{{ formatDuration(video.duration) }}</div>
              <div class="play-indicator">▶️</div>
            </div>
          </div>

          <!-- 分页控件 -->
          <div v-if="totalPages > 1" class="pagination">
            <button @click="handleCurrentChange(1)" :disabled="currentPage === 1" class="page-btn">
              首页
            </button>
            <button @click="handleCurrentChange(currentPage - 1)" :disabled="currentPage === 1" class="page-btn">
              上一页
            </button>
            <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
            <button @click="handleCurrentChange(currentPage + 1)" :disabled="currentPage === totalPages"
              class="page-btn">
              下一页
            </button>
            <button @click="handleCurrentChange(totalPages)" :disabled="currentPage === totalPages" class="page-btn">
              末页
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频操作菜单 -->
    <div v-if="showMenu" class="video-menu" :style="{ top: menuPosition.y + 'px', left: menuPosition.x + 'px' }"
      @click.stop>
      <div class="menu-item" @click="playVideo(selectedVideo)">
        <span class="menu-icon">▶️</span>
        播放视频
      </div>
      <div class="menu-item" @click="editVideo(selectedVideo)">
        <span class="menu-icon">✏️</span>
        编辑信息
      </div>
      <div class="menu-item danger" @click="confirmDeleteVideo(selectedVideo)">
        <span class="menu-icon">🗑️</span>
        删除视频
      </div>
      <div class="menu-item" @click="closeMenu">
        <span class="menu-icon">❌</span>
        取消
      </div>
    </div>

    <!-- 遮罩层 -->
    <div v-if="showMenu" class="menu-overlay" @click="closeMenu"></div>

    <!-- 底部导航 -->
     <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item active" @click="goToFeed">
        <span class="nav-icon">🏠</span>
        <span class="nav-text">首页</span>
      </div>
      <div class="nav-item" @click="goToPublish">
        <span class="nav-icon">➕</span>
        <span class="nav-text">发布</span>
      </div>
      <div class="nav-item" @click="goToLog">
        <span class="nav-icon">📜</span>
        <span class="nav-text">日志</span>
      </div>
      <div class="nav-item" @click="goToProfile">
        <span class="nav-icon">👤</span>
        <span class="nav-text">我的</span>
      </div>

    </div>

    <!-- 删除确认对话框 -->
    <el-dialog title="删除确认" :visible.sync="deleteDialogVisible" width="300px" center :show-close="false"
      class="delete-dialog" append-to-body :before-close="closeDeleteDialog">
      <div class="dialog-content">
        <div class="warning-icon">⚠️</div>
        <p>确定要删除视频《{{ videoToDelete?.title }}》吗？</p>
        <p class="warning-text">删除后无法恢复</p>
      </div>
      <div style="text-align: center; margin-top: 20px;">
        <button @click="closeDeleteDialog"
          style="margin-right: 10px; padding: 8px 15px; cursor: pointer; border-radius: 4px; border: 1px solid #ddd; background: #f5f5f5;">取消</button>
        <button id="confirm-delete-btn" @click="handleDeleteClick($event)"
          style="padding: 8px 15px; cursor: pointer; border-radius: 4px; border: none; background: #ff4d4f; color: white;">
          {{ deleteLoading ? '删除中...' : '确认删除' }}
        </button>
      </div>
    </el-dialog>

    <!-- 视频播放器弹窗 -->
    <video-player v-if="selectedVideoForPlay" :video="selectedVideoForPlay" :visible="showVideoPlayer"
      @close="closeVideoPlayer" @like-toggled="handleLikeToggled" />
  </div>
</template>

<script>
import API from '@/services/api'
import VideoPlayer from '@/components/VideoPlayer.vue'
import axios from 'axios'

export default {
  name: 'Profile',
  components: {
    VideoPlayer
  },
  data() {
    return {
      loading: true,
      videos: [],
      currentPage: 1,
      pageSize: 6,
      totalVideos: 0,

      // 菜单相关
      showMenu: false,
      selectedVideo: null,
      menuPosition: { x: 0, y: 0 },

      // 删除相关
      deleteDialogVisible: false,
      deleteLoading: false,
      videoToDelete: null,

      // 长按相关
      touchTimer: null,
      touchStartTime: 0,

      // 视频播放相关
      showVideoPlayer: false,
      selectedVideoForPlay: null,

      // 默认封面图（base64编码）
      defaultCoverImage: ''
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    displayedVideos() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.videos.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.videos.length / this.pageSize)
    }
  },
  async created() {
    if (!this.$store.getters.isLoggedIn) {
      this.$message.warning('请先登录')
      this.$router.push('/login')
      return
    }

    // 等待用户数据加载
    if (!this.user) {
      try {
        await this.$store.dispatch('fetchUserInfo')
        if (!this.user) {
          throw new Error('获取用户信息失败，请重新登录')
        }
      } catch (error) {
        console.error('Profile页面获取用户信息失败：', error)
        this.$message.error('获取用户信息失败：' + (error.message || '未知错误'))
        // 清除登录状态并跳转到登录页
        await this.$store.dispatch('logout')
        this.$router.push('/login')
        return
      }
    }

    await this.fetchUserVideos()
  },
  methods: {
    async fetchUserVideos() {
      try {
        this.loading = true

        // 检查用户数据是否存在
        if (!this.user || !this.user.id) {
          // 用户信息不完整，尝试重新获取
          try {
            await this.$store.dispatch('fetchUserInfo')
            if (!this.user || !this.user.id) {
              throw new Error('用户信息不完整，请重新登录')
            }
          } catch (error) {
            throw new Error('用户信息获取失败，请重新登录')
          }
        }

        const userId = this.user.id
        // 确保将用户ID作为字符串传递，避免精度丢失
        const response = await API.getUserVideos(this.$store.state.token, userId.toString())

        if (response.data && response.data.status_code === 0) {
          this.videos = response.data.video_list || []
          this.totalVideos = this.videos.length

          // 计算累计获得的点赞数
          let totalLikes = 0;
          this.videos.forEach(video => {
            totalLikes += parseInt(video.favorite_count || 0);
          });

          // 更新用户信息中的作品数和点赞数
          if (this.user) {
            this.user.work_count = this.totalVideos;
            this.user.favorite_count = totalLikes;
            console.log('更新用户累计点赞数:', totalLikes);
          }
        } else {
          throw new Error(response.data?.status_msg || '获取视频列表失败')
        }
      } catch (error) {
        console.error('获取视频失败：', error)
        this.$message.error('获取视频失败：' + (error.message || '未知错误'))

        // 如果是用户信息问题，进行登出操作
        if (error.message && (
          error.message.includes('用户信息不完整') ||
          error.message.includes('用户信息获取失败') ||
          error.message.includes('用户不存在')
        )) {
          await this.$store.dispatch('logout')
          this.$router.push('/login')
          return
        }

        this.videos = []
        this.totalVideos = 0
      } finally {
        this.loading = false
      }
    },

    handleCurrentChange(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        // 滚动到顶部
        document.querySelector('.content').scrollTop = 0
      }
    },

    // 播放视频
    playVideo(video) {
      this.closeMenu()
      // 设置要播放的视频并显示播放器
      this.selectedVideoForPlay = video
      this.showVideoPlayer = true
    },

    // 编辑视频信息
    editVideo(video) {
      this.closeMenu()
      this.$message.info(`编辑视频: ${video.title}`)
      // 这里可以实现编辑逻辑
    },

    // 显示视频菜单
    showVideoMenu(video, event) {
      event.preventDefault()
      this.selectedVideo = video
      this.menuPosition = {
        x: event.clientX,
        y: event.clientY
      }
      this.showMenu = true
    },

    // 长按事件处理
    onTouchStart(video, event) {
      this.touchStartTime = Date.now()
      this.touchTimer = setTimeout(() => {
        // 长按500ms触发菜单
        this.selectedVideo = video
        const touch = event.touches[0]
        this.menuPosition = {
          x: touch.clientX,
          y: touch.clientY
        }
        this.showMenu = true
        // 震动反馈
        if (navigator.vibrate) {
          navigator.vibrate(50)
        }
      }, 500)
    },

    onTouchEnd() {
      if (this.touchTimer) {
        clearTimeout(this.touchTimer)
        this.touchTimer = null
      }
      // 如果是短按（小于500ms），则播放视频
      if (Date.now() - this.touchStartTime < 500 && this.selectedVideo && !this.showMenu) {
        this.playVideo(this.selectedVideo)
      }
    },

    // 关闭菜单
    closeMenu() {
      this.showMenu = false
      this.selectedVideo = null
    },

    // 确认删除视频
    confirmDeleteVideo(video) {
      console.log('准备删除视频:', video.id, video.title);
      this.selectedVideo = video;
      this.videoToDelete = video; // 保存到专用变量
      this.closeMenu();
      this.deleteDialogVisible = true;
    },

    // 关闭删除对话框
    closeDeleteDialog() {
      this.deleteDialogVisible = false;
      // 延迟清理videoToDelete，确保不会在事件处理期间被清空
      setTimeout(() => {
        this.videoToDelete = null;
        this.selectedVideo = null;
      }, 100);
    },

    // 处理删除按钮点击
    handleDeleteClick(event) {
      // 阻止事件冒泡
      if (event) {
        event.preventDefault();
        event.stopPropagation();
      }

      console.log('删除按钮被点击');
      // 添加调试信息
      console.log('当前选中的视频:', this.selectedVideo);
      console.log('要删除的视频:', this.videoToDelete);
      console.log('选中视频ID:', this.videoToDelete?.id);
      console.log('选中视频标题:', this.videoToDelete?.title);
      console.log('当前用户token:', this.$store.state.token);

      // 检查必要的数据是否存在
      if (!this.videoToDelete || !this.videoToDelete.id) {
        this.$message.error('没有选择要删除的视频');
        return;
      }

      if (!this.$store.state.token) {
        this.$message.error('登录已过期，请重新登录');
        return;
      }

      // 使用axios直接调用API，替代API.deleteVideo方法
      this.deleteLoading = true;

      const token = this.$store.state.token;
      const videoId = this.videoToDelete.id;

      console.log('开始发送删除请求');

      const url = `/douyin/publish/delete/?token=${encodeURIComponent(token)}&video_id=${encodeURIComponent(videoId.toString())}`;
      console.log('请求URL:', url);

      // 使用axios发送DELETE请求
      axios.delete(url)
        .then(response => {
          console.log('删除视频API响应:', response);

          if (response.data && response.data.status_code === 0) {
            this.$message.success('视频删除成功');

            // 保存视频ID备用
            const deletedVideoId = this.videoToDelete.id;

            // 先关闭对话框和清理选中视频
            this.closeDeleteDialog();

            // 然后从列表中移除视频
            this.videos = this.videos.filter(v => v.id !== deletedVideoId);
            this.totalVideos = this.videos.length;

            // 更新用户作品数
            if (this.user) {
              this.user.work_count = this.totalVideos;
            }

            // 调整当前页
            if (this.displayedVideos.length === 0 && this.currentPage > 1) {
              this.currentPage = this.currentPage - 1;
            }
          } else {
            console.error('删除失败, API返回:', response.data);
            this.$message.error(response.data?.status_msg || '删除失败');
          }
        })
        .catch(error => {
          console.error('删除视频失败:', error);
          let errorMessage = '删除失败';

          if (error.response) {
            const responseData = error.response.data;
            console.error('错误响应数据:', responseData);
            errorMessage = responseData?.status_msg || `服务器错误: ${error.response.status}`;

            if (error.response.status === 403) {
              errorMessage = '无权限删除该视频';
            } else if (error.response.status === 404) {
              errorMessage = '视频不存在或已被删除';
            } else if (error.response.status === 405) {
              errorMessage = '服务器不支持此操作方法';
            }
          } else if (error.message) {
            errorMessage = error.message;
          }

          this.$message.error(errorMessage);
        })
        .finally(() => {
          this.deleteLoading = false;
        });
    },

    // 格式化时长
    formatDuration(seconds) {
      if (!seconds) return '00:00'
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    },

    // 处理图片加载错误
    handleImageError(event) {
      // 使用已经加载到内存中的base64图片，避免额外的网络请求
      event.target.src = this.defaultCoverImage;

      // 防止继续触发错误事件
      event.target.onerror = null;
    },

    logout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('logout')
        this.$message.success('已退出登录')
        this.$router.push('/login')
      }).catch(() => { })
    },

    goToFeed() {
      this.$router.push('/feed')
    },

    goToPublish() {
      this.$router.push('/publish')
    },

    goToLog() { this.$router.push('/log') },

    goToProfile() {
      // 当前页面，不跳转
    },

    // 关闭视频播放器
    closeVideoPlayer() {
      this.showVideoPlayer = false
      this.selectedVideoForPlay = null
    },

    // 刷新累计点赞数
    updateTotalLikes() {
      let totalLikes = 0;
      this.videos.forEach(video => {
        totalLikes += parseInt(video.favorite_count || 0);
      });

      if (this.user) {
        this.user.favorite_count = totalLikes;
        console.log('刷新用户累计点赞数:', totalLikes);
      }

      return totalLikes;
    },

    // 处理点赞状态变化
    handleLikeToggled(data) {
      console.log('收到点赞状态变化:', data);

      // 查找视频并更新
      const video = this.videos.find(v => v.id === data.videoId);
      if (video) {
        // 确保视频数据与点赞状态同步
        video.is_favorite = data.isLiked;

        // 如果视频的点赞数与预期不一致，进行更新
        const expectedCount = parseInt(video.favorite_count || 0);
        if (video.favorite_count !== expectedCount) {
          console.log('同步视频点赞数:', video.id, '预期:', expectedCount);
          video.favorite_count = expectedCount;
        }
      }

      // 更新累计点赞数
      this.updateTotalLikes();
    },
  },

  // 清理定时器
  beforeDestroy() {
    if (this.touchTimer) {
      clearTimeout(this.touchTimer)
    }
  }
}
</script>

<style scoped>
.profile-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  position: relative;
}

.header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

.header h1 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.back-button,
.logout {
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.back-button:hover,
.logout:hover {
  background: rgba(255, 255, 255, 0.1);
}

.user-info {
  display: flex;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  margin-bottom: 10px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d92, #ff6b35);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  font-size: 30px;
  box-shadow: 0 4px 15px rgba(255, 45, 146, 0.3);
}

.info {
  flex: 1;
}

.info h2 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #fff;
}

.stats {
  display: flex;
}

.stat-item {
  margin-right: 20px;
  text-align: center;
}

.count {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
  color: #fff;
}

.label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 60px 0;
}

.tab-header {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 5;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  font-size: 16px;
  position: relative;
  color: #fff;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: #ff2d92;
}

.video-list {
  padding: 15px;
}

.empty-tip {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.7);
}

.empty-tip p:first-child {
  font-size: 48px;
  margin-bottom: 20px;
}

.empty-tip p:nth-child(2) {
  font-size: 16px;
  margin-bottom: 30px;
}

.publish-btn {
  background: linear-gradient(135deg, #ff2d92, #ff6b35);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 45, 146, 0.4);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.video-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.video-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 45, 146, 0.2);
}

.video-item:active {
  transform: scale(0.98);
}

.video-cover {
  position: relative;
  width: 100%;
  padding-bottom: 133.33%;
}

.video-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-title {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
}

.video-duration {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
}

.play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.4);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  /* 确保点击事件透过此元素 */
}

.video-item:hover .play-indicator {
  opacity: 1;
}

.pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 15px;
  flex-wrap: wrap;
}

.page-btn {
  padding: 8px 12px;
  background: linear-gradient(135deg, #ff2d92, #ff6b35);
  color: #fff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
  min-width: 60px;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.2);
}

.page-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 45, 146, 0.4);
}

.page-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 0 10px;
}

/* 视频菜单样式 */
.video-menu {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 8px 0;
  z-index: 1000;
  min-width: 140px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item.danger {
  color: #ff4d4f;
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* 删除对话框样式 */
.delete-dialog {
  border-radius: 12px;
}

.dialog-content {
  text-align: center;
  padding: 20px 0;
}

.warning-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.warning-text {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 8px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  max-width: 375px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  padding: 6px 12px;
  min-width: 60px;
  text-align: center;
}

.nav-item:hover {
  color: white;
  transform: translateY(-1px);
}

.nav-item.active {
  color: #ff2d55;
}

.nav-icon {
  font-size: 18px;
  margin-bottom: 3px;
  line-height: 1;
}

.nav-text {
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

/* 移动端优化 */
@media (max-width: 480px) {
  .bottom-nav {
    height: 50px;
    padding: 0 5px;
  }

  .nav-item {
    padding: 4px 6px;
    min-width: 45px;
  }

  .nav-icon {
    font-size: 16px;
    margin-bottom: 2px;
  }

  .nav-text {
    font-size: 9px;
  }

  .video-menu {
    min-width: 120px;
  }

  .menu-item {
    padding: 10px 12px;
    font-size: 13px;
  }

  .pagination {
    gap: 8px;
  }

  .page-btn {
    padding: 6px 10px;
    font-size: 11px;
    min-width: 50px;
  }
}
</style>